<template>
    <section>
        <div v-show="vMaster">
                <sy-baselist
                        ref="list"
                        fixOperate
                        :showFilterCount="2"
                        :filters="filters"
                        @searchChange="searchChange"
                        :hideAdd="!isAdmin"
                        :hideOperate="!isAdmin"
                        @row-class-name="tableRowClassName"
                        editVue="./customer/Contract_Edit.vue"
                        listUrl="server/customer/Contract.ashx?cmd=GetList"
                        deleteUrl="server/customer/Contract.ashx?cmd=Delete"
                >
                    <el-table-column prop="FNo" v-if="isAdmin" header-align="center" label="合同编号" width="110">
                        <template  scope="scope">
                            <a href="javascript:;" @click="viewContract(scope.row)">{{ scope.row.FNo }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FNo" v-if="!isAdmin" header-align="center" label="合同编号" width="110">
                    </el-table-column>
                    <el-table-column prop="CustomerName"  header-align="center" label="客户名称" width="220" sortable>
                        <template scope="scope">
                            <a href="javascript:;" @click="viewCustomer(scope.row)">{{ scope.row.CustomerName }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FProjectName"  header-align="center" label="项目申报名称" width="300" sortable>
                    </el-table-column>
                    <el-table-column prop="FBankrollType"  header-align="center" label="申报资金种类" width="320">
                    </el-table-column>
                    <el-table-column prop="UserName"  header-align="center" label="跟单员" width="160" >
                    </el-table-column>
                    <el-table-column prop="Collections" label="材料收集情况" width="280" >
                        <template scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <div v-html="scope.row.Collections"> </div>
                                <div slot="reference" v-html="min(scope.row.Collections)">
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FDeadline"  header-align="center" label="资金年限" width="120">
                    </el-table-column>
                    <el-table-column prop="FGrade"  header-align="center" label="申报等级" width="120" sortable>
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="FCommission"  header-align="center" label="业务提成" width="160">
                    </el-table-column>
                    <el-table-column prop="Provice"  header-align="center" label="省份" width="100" sortable>
                    </el-table-column>
                    <el-table-column prop="City"  header-align="center" label="城市" width="100" sortable>
                    </el-table-column>
                    <el-table-column prop="IsBankroll"  header-align="center" label="是否获取资金" width="100" >
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="FPayWay"  header-align="center" label="付款方式" width="100">
                    </el-table-column>
                    <el-table-column  prop="FCustCommission"  header-align="center" label="合同点数(%)" :formatter="formatPercent"  width="100">
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="FAmount"  header-align="center" label="获得扶持资金总额" :formatter="formatMoney" width="100">
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="ToAmount"  header-align="center" label="应得咨询费总额" :formatter="formatMoney" width="95">
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="FActAmount"  header-align="center" label="实际咨询费总额" :formatter="formatMoney" width="95">
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="FPayedAmount"  header-align="center" label="已付金额" :formatter="formatMoney" width="100">
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="PayedAll"  header-align="center" label="是否欠款" width="70" >
                    </el-table-column>
                    <el-table-column v-if="isAdmin" prop="FCounselor"  header-align="center" label="咨询师" width="80" >
                    </el-table-column>
                    <el-table-column prop="FNote"  header-align="center" label="备注" width="250" >
                    </el-table-column>
                    <el-table-column prop="FCompletedDate"  header-align="center" label="合同签订时间" :formatter="formatDate" width="130" >
                    </el-table-column>
                    <el-table-column prop="FToCompletedDate"  header-align="center" label="合同完成时间" :formatter="formatDate" width="130" >
                    </el-table-column>
                    <template  v-if="isAdmin"  slot="extendbtnTop">
                        <el-button type="success" size="small"  :loading="excelLoading"  @click="exportExcel()">导出Excel</el-button>
                    </template>
                    <template  scope="props" slot="extendbtn">
                        <div style="padding: 5px">  </div>
                    </template>
                    <template  scope="props" slot="extendbtn_end">
                        <div style="padding: 5px">  </div>
                    </template>
                </sy-baselist>
        </div>

        <div v-show="vDetail">
            <el-button type="success" size="small" icon="caret-left"
                       style="margin: 10px 0 0 10px" @click="back()">返回合同列表</el-button>
            <el-tabs v-model="activeTab">
                <el-tab-pane name="tab_1">
                    <span slot="label"><i class="el-icon-view"></i> 合同详情 </span>
                    <ContractDetail ref="contractDetail"></ContractDetail>
                </el-tab-pane>
                <el-tab-pane name="tab_2">
                    <span slot="label"><i class="el-icon-date"></i> 回款及发票</span>
                    <ContractIncome ref="contractIncome"></ContractIncome>
                </el-tab-pane>
                <el-tab-pane  name="tab_3">
                    <span slot="label"><i class="el-icon-document"></i> 费用支出</span>
                    <ContractExpend ref="contractExpend"></ContractExpend>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div v-show="vCustomer">
            <el-button type="success" size="small" icon="caret-left"
                       style="margin: 10px 0 0 10px" @click="back()">返回合同列表</el-button>
            <CustomerOne ref="customerOne"></CustomerOne>
        </div>

    </section>
</template>

<script>
    import util from '../../common/util'
    import mixin from '../../common/mixin'
    import ContractIncome from "./ContractIncome.vue"
    import ContractExpend from "./ContractExpend.vue"
    import ContractDetail from "./Contract_Detail.vue"
    import CustomerOne from "./Customer_One.vue"
    export default {
        mixins: [mixin],
        components:{
            ContractIncome:ContractIncome,
            ContractExpend:ContractExpend,
            ContractDetail:ContractDetail,
            CustomerOne:CustomerOne
        },
        data(){
            return {
                isAdmin:(global.user.FID==-1),
                activeTab:"tab_1",
                vMaster:true,
                vDetail:false,
                vCustomer:false,
                excelLoading:false,
                filters: [
                    {type: "string",name:"FNo",text:"合同编号"},
                    {type: "string",name:"Customer.FName",text:"客户名称"},
                    {type: "string",name:"FProjectName",text:"项目申报名称"},
                    {type: "select",name:"FGrade",text:"申报等级",
                        data:["国家级","省级","市级","县级"]
                    },
                    {type: "select",name:"FBankrollType",text:"申报资金种类",valueKey:"FName",
                        data:"server/system/SetType.ashx?cmd=GetOptions&FType=1"},
                    {type: "select",name:"Customer.FProvice",text:"省份",valueKey:"FName",
                        data:"server/system/System.ashx?cmd=GetArea&pid=0"},
                    {type: "select",name:"Customer.FCity",text:"城市",valueKey:"FName",
                        data:"server/system/System.ashx?cmd=GetArea&pid=450000"},
                    {type: "select",name:"FUserID",text:"跟单员",
                        data:"server/system/User.ashx?cmd=GetUserOptions"},
                    {type: "string",name:"FCounselor",text:"咨询师"},
                    {type: "select",remote:true,name:"PayedAll",text:"是否欠款",
                        data:["是","否"]},
                    {type: "select",remote:true,name:"IsBankroll",text:"是否获取资金",
                        data:["是","否"]},
                    {type: "period",dateType:"year",name:"FDeadlineBeg",name2:"FDeadlineEnd",
                        text:"资金年限开始",text2:"资金年限结束", value: null,value2:null},
                    {type: "date",name:"FCompletedDate",text:"合同签订时间", value: null},
                    {type: "date",name:"FToCompletedDate",text:"合同完成时间", value: null},
                ]
            }
        },
        methods:{
            min(text){
                let arr = text.split("<br>")
                if(arr.length>=2){
                    return arr.slice(0,2).join("<br>") + "......"
                }
                return text
            },
            exportExcel(){
                let para = this.$refs.list._wherePara();
                window.open(global.serverHost + "server/customer/Contract.ashx?cmd=ExportExcel&where=" + encodeURI(para.where));
            },
            formatPercent(row, column) {
                return row[column.property] + "%"
            },
            formatMoney(row, column) {
                return row[column.property] + "万"
            },
            formatMoney2(row, column) {
                return row[column.property] + "元"
            },
            viewCustomer(row){
                //this.$router.push({path: '/Customer',query: {custID: row.FCustID }});
                this.vMaster = false
                this.vCustomer = true
                this.$refs.customerOne._initByID(row.FCustID)
            },
            viewContract(row){
                this.vMaster = false
                this.vDetail = true
                this.activeTab = "tab_1"
                this.$refs.contractDetail._init(row)
                this.$refs.contractIncome._init(row.FID)
                this.$refs.contractExpend._init(row.FID)
            },
            back(){
                this.vMaster = true
                this.vDetail = false
                this.vCustomer = false
            },
            //省、城市联动
            searchChange(key,val,record){
                if(key=="Customer.FProvice"){
                    let item = this.filters.find((v,i,arr)=>{
                        return v.name=="Customer.FCity"
                    })
                    if(item){
                        item.data = "server/system/System.ashx?cmd=GetArea&pid="+(record.FID?record.FID:-1)
                    }
                }
            },
            tableRowClassName(row, index,r) {
                let now = new Date()
                if(row.PayedAll=="是"){
                    r.className = 'memo-row';
                }else {
                    r.className = '';
                }
            },
        }
    }
</script>



<style>
    .el-table .memo-row {
        background: #ffc994;
    }
</style>